<template>
    <div class="radio-list">
        <div class="radio-list-inner">
          <ul class="left" ref="leftList">
            <li :class="{select:currentIndex===index}" @click="chooseType(index)" v-for="(item,index) in list" :key="index">{{item.name}}</li>
          </ul>
          <ul class="right" ref="rightList">
              <li v-for="(item1,index1) in list" :key="index1" ref="radioItem">
                  <div class="type">{{item1.name}}</div>
                  <ul class="list">
                    <li v-for="(item2,index2) in list[index1].radioList" :key="index2">
                      <div class="img">
                        <img :src="item2.radioImg" alt="">
                        <div class="icon">
                          <span class="iconfont icon-bofang1"></span>
                        </div>
                      </div>
                      <div class="name ellipsis">{{item2.radioName}}</div>
                      <div class="listen-num">播放量:{{(item2.listenNum/10000).toFixed(1)}}万</div>
                    </li>
                  </ul>
              </li>
          </ul>
        </div>
    </div>
</template>

<script>
    import {mapState} from 'vuex'
    export default {
        name: "RadioStation",
        data(){
          return{
            list:[],
            currentIndex:0,
            itemHeight:[],
          }
        },
        methods:{
          chooseType(index){
            this.currentIndex=index;
            if(this.itemHeight.length>1){
              document.documentElement.scrollTop=200+this.itemHeight[index];
            }
            this.$refs.leftList.className='left is-fixed'
            // console.log(this.$refs);
            this.$refs.rightList.style.marginLeft='240px'
          },
          handleScroll(){
            if(document.documentElement.scrollTop<200&&this.$refs&&this.$refs.leftList.className=='left is-fixed'){
              this.$refs.leftList.className='left'
              this.$refs.rightList.style.marginLeft='0'
            }else if(document.documentElement.scrollTop>200){
              this.$refs.leftList.className='left is-fixed'
              this.$refs.rightList.style.marginLeft='240px'
            }
            for(let i=1;i<=this.itemHeight.length;i++){
              if(document.documentElement.scrollTop>this.itemHeight[i-1]&&document.documentElement.scrollTop<this.itemHeight[i]){
                  this.currentIndex=i-1;
              }
            }
          }
        },
        computed:{
          ...mapState(['radioList']),
        },
        watch:{
          radioList(value){
            this.list=value;
            // console.log(this.list);
          }
        },
        mounted(){
          this.$store.dispatch('getRadioList');
          window.addEventListener('scroll', this.handleScroll);
        },
        //当定义ref中，同时出现v-if,v-show,v-for,则在mounted中渲染会失败，定义在updated中可以解决渲染失败的问题
        updated(){
          this.itemHeight=[0];
          // console.log(this.$refs.radioItem);
          for(let i=0;i<this.$refs.radioItem.length;i++){
            // console.log(this.$refs.radioItem[i].clientHeight);
            this.itemHeight.push(this.itemHeight[i]+this.$refs.radioItem[i].clientHeight);
          }
          // console.log(this.itemHeight);
        }
    }
</script>
<style scoped lang="less">
  .radio-list{
    background:linear-gradient(to bottom,#f2f2f2,#fafafa);
    .radio-list-inner{
      width: 1200px;
      margin: 0 auto;
      padding: 50px 0px;
      display: flex;
      flex-direction: row;
      .left{
        flex: 1;
        &.is-fixed{
          position: fixed;
          top: 0px;
        }
        >li{
          padding: 10px 20px;
          margin-bottom: 20px;
          border-left:2px solid #ccc;
          &.select{
            color: #31c27c;
            border-left:2px solid #31c27c;
          }
        }
      }
      .right{
        flex: 4;
        >li{
          padding: 10px 0px;
          .type{
            color: #999;
            margin-bottom: 20px;
            &:after{
              content: '';
              display: block;
              height: 1px;
              width: 92%;
              background-color: #ddd;
              margin-left: 54px;
              margin-top: -7px;

            }
          }
        }
      }
    }
  }
  .radio-list .radio-list-inner .list li{margin-bottom:32px;font-size:14px;display: inline-block;width: 222px;margin-right: 17px;position: relative;}
  .radio-list .radio-list-inner .list li:nth-child(4n){margin-right: 0px;}
  .radio-list .radio-list-inner .list li img{width: 226px;height: 222px;display: block;cursor: pointer;transition: all 0.6s;}
  .radio-list .radio-list-inner .list li .name{margin-top: 19px;margin-bottom: 10px;}
  .radio-list .radio-list-inner .list li .listen-num{color: #999;}
  .radio-list .radio-list-inner .list li .name:hover{cursor: pointer;color: #31c27c;}
  .radio-list .radio-list-inner .list li .img:hover::after{content: '';display: block;width: 222px;height: 222px;position: absolute;top:0;left: 0;background: #000;opacity: 0.2;}
  .radio-list .radio-list-inner .list li .img{width: 222px;height: 222px;overflow: hidden;}
  .radio-list .radio-list-inner .list li .img:hover img{transform: scale(1.2);}
  .radio-list .radio-list-inner .list li .icon{position: absolute;z-index: 1;background: white;border-radius: 50%;height:40px;width: 40px;text-align: center;line-height: 40px;opacity: 0;transition: all 1s;top:30%;right: 0;left: 0;margin: 0 auto}
  .radio-list .radio-list-inner .list li .img:hover .icon{opacity: 1;transform: scale(1.3);}
  .radio-list .radio-list-inner .list li .iconfont{font-size: 25px;color: #545454;margin-left: 4px;margin-top: 3px;display: inline-block;}
</style>
